<template>
  <div class="bb-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/subdivision/gdbh-text-gdzl.png" alt="" />
      </div>
      <div class="co-title-right">
        <div class="co-title-breathe"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>

    <div class="item-container">
      <div class="lf">
        <p class="title">耕地占用与补充情况</p>
        <div class="pq-echart-box" id="gdzlEchart"></div>
      </div>
      <div class="rg">
        <li class="item">
          <div class="icon"></div>
          <div class="text-area">
            <p class="text">耕地质量提升</p>
            <p class="num"><span class="value1">+0.02</span> <span class="label">公顷</span></p>
          </div>
        </li>
        <li class="item">
          <div class="icon"></div>
          <div class="text-area">
            <p class="text">2021年平均等级</p>
            <p class="num"><span class="value2">5.74</span> <span class="label"></span></p>
          </div>
        </li>
      </div>
    </div>

    <div class="bottom-content">
      <div class="left">
        耕地质量结构分布
      </div>
      <ul class="right">
        <li style="width:36.25%">
          <div class="percent">
            36.25%
          </div>
          <div class="text">1~4等</div>
        </li>
        <li style="width:36.25%">
          <div class="percent">
            36.25%
          </div>
          <div class="text">5~8等</div>
        </li>
        <li style="width:14.75%">
          <div class="percent">
            14.75%
          </div>
          <div class="text">9~12等</div>
        </li>
        <li style="width:14.75%">
          <div class="percent">
            14.75%
          </div>
          <div class="text">13~15等</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import echarts from 'echarts'

@Component({
  name: 'LandProtectionItem3',
  components: {}
})
export default class LandProtectionItem3 extends Vue {
  initFloorage() {
    const myChart = echarts.init(document.getElementById('gdzlEchart') as HTMLElement)
    myChart.setOption({
      label: {
        color: '#ffffff'
      },
      grid: {
        top: '0%',
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['2016', '2017', '2018', '2019', '2020', '2021'],
        //设置网格线颜色
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#254177'
          }
        },

        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#00eaff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#1c3a73'],
            width: 1,
            type: 'solid'
          }
        },
        // y轴轴线颜色
        axisLine: {
          lineStyle: {
            color: '#254177'
            // width: 1 //这里是坐标轴的宽度
          }
        }
      },
      series: [
        {
          data: [8, 7, 3, 14, 16, 19],
          type: 'line',
          smooth: true,
          barWidth: '18%',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#00A3F4'
              },
              {
                offset: 1,
                color: '#00A3F4'
              }
            ])
          },
          itemStyle: {
            color: '#fffff'
          },
          showBackground: true,
          backgroundStyle: {
            color: '#fff'
          }
        }
      ]
    })
  }
  mounted() {
    this.initFloorage()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bb-bg {
  width: 100%;
  height: 100%;
  padding: 22px 12px 12px 16px;
  background: url('~@/assets/cockpit/bb-bg.png') no-repeat 0/ 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.item-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  .lf {
    flex: 5;
    .title {
      font-size: 12px !important;
      color: #dffeff;
      margin-top: 10px;
    }
    .pq-echart-box {
      width: 100%;
      height: 93px;
      margin-top: 12px;
    }
  }
  .rg {
    flex: 2;
    margin-top: 10px;

    .item {
      display: flex;
      margin-top: 14px;
      margin-left: 12px;
      .icon {
        width: 4px;
        height: 4px;
        margin-top: 4px;
        margin-right: 6px;
        display: block;
        background: #f9f0d4;
        border-radius: 1px;
        box-shadow: 0 0 4px 1px #f0b04a;
        transform: rotate(45deg);
      }
      .text-area {
        .text {
          font-size: 12px !important;
          color: #bffeff;
        }
        .num {
          color: #fff;
          display: flex;
          line-height: 26px;

          .value1 {
            font-size: 20px !important;
            text-shadow: 0 0 4px #0fa;
          }
          .value2 {
            font-size: 20px !important;
          }
          .label {
            font-size: 12px !important;
            margin-left: 6px;
          }
        }
      }
    }
  }
}
.bottom-content {
  display: flex;
  margin-top: 8px;
  .left {
    font-size: 12px !important;
    color: #dffeff;
    line-height: 24px;
    margin-right: 10px;
  }
  .right {
    width: 318px;
    display: flex;
    li {
      text-align: center;
      position: relative;
      .percent {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-size: 12px !important;
        color: #fff;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.64);
      }
      .text {
        width: 110%;
        position: absolute;
        left: 0;
        bottom: -12px;
        font-size: 8px !important;
        color: #fff;
      }
    }
    li:nth-of-type(1) {
      .percent {
        background: #6eeeff;
      }
    }
    li:nth-of-type(2) {
      .percent {
        background: #06a9f2;
      }
    }
    li:nth-of-type(3) {
      .percent {
        background: #0a6fa3;
      }
    }
    li:nth-of-type(4) {
      .percent {
        background: #0e4377;
      }
    }
  }
}
</style>
